<template>
  <div class="header">
      <div class="left"><div class="iconf back-icon">&#xe622;</div></div>
      <div class="input"><span class="iconf">&#xe600;</span>查找喜欢的城市</div>
      <router-link to='/city'>
        <!-- <div class="right">{{this.$store.state.city}}<span class="iconf arrow-icon">&#xe60e;</span></div> -->
        <div class="right">{{this.city}}<span class="iconf arrow-icon">&#xe60e;</span></div>
      </router-link>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState(['city'])
  }
}
</script>
<style lang="stylus" scoped>
@import "~styles/variables"
    .header
        display:flex
        height:.86rem
        line-height:.86rem
        background:$bgColor
        color:#fff
        .left
            width:.64rem
            float:left
            .back-icon
                font-size:.4rem
                text-align:center
        .right
            min-width:1.24rem
            text-align :center
            padding:0 .1rem
            color:#fff
            .arrow-icon
                font-size :.24rem
        .input
            flex:1
            margin-top:.12rem
            height:.64rem
            line-height:.64rem
            background :#fff
            color:#ccc
            border-radius:.04rem
            margin-left:.2rem
            padding-left:.2rem

</style>
